import 方式引入

在组件中直接 import js 和 css 公共文件, 这种引入会进行 Webpack 编译,比如压缩

import  'asset/css/global.css'
import  'asset/js/common.js'

文件拷贝模式

借助 copy-webpack-plugin 进行文件拷贝,copy 插件已在 easywebpack@4.8.5 内置支持,然后页面通过 link 标签引入。注意拷贝的文件不会压缩和hash,所以拷贝的文件建议是压缩的,同时修改引入时,记得修改版本号版本号控制。

  • webpack.config.js 配置
module.exports = {
  plugins: {
    copy: [{
      from: 'app/web/asset/css/bootstrap.min.css',
      to: 'asset/css/bootstrap.min.css'
    }]
  }
};
  • 页面引入
<link href="/public/asset/css/bootstrap.min.css?v=1" rel="stylesheet" type="text/css" />

CDN 链接引入

<link href="//bootcdn.com/public/asset/css/bootstrap.min.css?v=1" rel="stylesheet" type="text/css" />

静态资源内敛

raw-loader 内敛脚本 或 Vue template 标签动态绑定引入

const vConsoleScript = `<script async src="//cdn.com/script/vConsole.min.js"></script>';  
<template v-html="vConsoleScript"></template>
<template v-html="require('raw-loader!./script/vConsole.min.js')"></template>

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
Vue 工程方案 Vue 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置,以下仅仅是举例. 详细配置见:https://easy-team.gitee.io...
2019-12-23 sky
Next 
Weex 工程方案 Weex 工程方案
easywebpack-weex 基于 easywebpack 的 Weex Native 和 Weex Web 打包构建解决方案.安装$ npm i easywebpack-weex --save-dev使用const weex = require('easywebpack-weex'); ...
2019-12-23 sky